<script setup>
import { ref, reactive,watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage,ElMessageBox } from 'element-plus'
import { save } from '@/api/bed'
const router = useRouter()
// 表单数据
const form = reactive({
  bedNumber: '',
  wardId: '', // 改为手动输入的病房名称
  floor: 1,
  price: 0,
  status: 0 // 默认空闲状态
})

// 表单验证规则
const rules = reactive({
  bedNumber: [
  { required: true, message: '请输入床位编号', trigger: 'blur' },
  { 
    validator: (_, value, callback) => {
      if (value && (isNaN(value) || Number(value) > 6)) {
        callback(new Error('床位编号必须为数字且不大于6'))
      } else {
        callback()
      }
    },
    trigger: 'blur'
  }
],
 wardId: [
    { required: true, message: '请输入房间号', trigger: 'blur' },
    {
      validator: (_, value, callback) => {
        if (!value) return callback()
        
        // 基础验证
        if (!/^\d+$/.test(value)) {
          return callback(new Error('房间号必须为纯数字'))
        }
        if (value.length !== 3) {
          return callback(new Error('房间号必须为3位数字'))
        }
        if (value.startsWith('0')) {
          return callback(new Error('房间号不能以0开头'))
        }
        
        // 新增：检查楼层和房间号首位数是否一致
        if (form.floor && value[0] !== String(form.floor).slice(-1)) {
          return callback(new Error('房间号首位数必须与楼层一致'))
        }
        
        callback()
      },
      trigger: ['blur', 'change'] // 增加change触发
    }
  ],
  floor: [
    { required: true, message: '请选择楼层', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    { type: 'number', min: 0, message: '价格不能为负数', trigger: 'blur' }
  ]
})
watch(() => form.floor, (newFloor) => {
  if (form.wardId) {
    formRef.value.validateField('wardId') // 楼层变化时重新验证房间号
  }
})
// 状态选项
const statusOptions = [
  { value: 0, label: '空闲' },
  { value: 1, label: '占用' },
  { value: 2, label: '维修' },
  { value: 3, label: '禁用' }
]

// 楼层选项 (1-6层)
const floorOptions = Array.from({ length: 6 }, (_, i) => ({
  value: i + 1,
  label: `${i + 1}层`
}))

const formRef = ref()
const loading = ref(false)

// 提交表单
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true
        await save(form)
        ElMessage.success('新增床位成功')
        router.push('/bedManagement/page') // 返回床位管理列表
      } catch (error) {
        ElMessage.error(error.message || '新增床位失败')
      } finally {
        loading.value = false
      }
    }
    else{
        // 提交前再次确认楼层和房间号一致性
      if (form.floor && form.wardId && form.wardId[0] !== String(form.floor).slice(-1)) {
       await ElMessageBox.alert('房间号首位数必须与楼层一致', '验证错误', {
        confirmButtonText: '我知道了',
        type: 'error'
      })
      return // 停止提交
      }
    }
  })
}

// 返回上一页
const goBack = () => {
  router.push({
          path:"/bedManagement/page",
        })
}
</script>

<template>
   <div id="app">
    <div class="bed-add-container">
      <div class="header-container">
        <div class="header-background"></div>
        <div class="page-header">
          <div class="page-header-icon">
            <i class="fas fa-bed"></i>
          </div>
          <div class="header-content">
            <div class="header-title">新增床位</div>
            <div class="header-subtitle">请填写床位详细信息</div>
          </div>
        </div>
      </div>
      
      <div class="form-card">
        <div class="form-header">
          <i class="fas fa-plus-circle"></i>
          <h2>床位信息登记</h2>
        </div>
        
        <div class="form-content">
          <el-form 
            ref="formRef" 
            :model="form" 
            :rules="rules"
          >
            <el-form-item label="床位编号" prop="bedNumber">
              <el-input 
                v-model="form.bedNumber" 
                placeholder="请输入床位编号，如：1、2等" 
                clearable
              >
                <template #prefix>
                  <i class="fas fa-hashtag"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="所属房间" prop="wardId">
              <el-input 
                v-model="form.wardId" 
                placeholder="请输入房间号，如：101、201等" 
                clearable
              >
                <template #prefix>
                  <i class="fas fa-door-open"></i>
                </template>
              </el-input>
            </el-form-item>

            <div style="display: flex; gap: 20px; margin-bottom: 28px;">
              <el-form-item label="楼层" prop="floor" style="flex: 1;">
                <el-select
                  v-model="form.floor"
                  placeholder="请选择楼层"
                  style="width: 100%"
                >
                  <template #prefix>
                    <i class="fas fa-layer-group"></i>
                  </template>
                  <el-option
                    v-for="floor in floorOptions"
                    :key="floor.value"
                    :label="floor.label"
                    :value="floor.value"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="价格(元/天)" prop="price" style="flex: 1;">
                <el-input-number
                  v-model="form.price"
                  :min="0"
                  :precision="2"
                  controls-position="right"
                  style="width: 100%"
                >
                  <template #prefix>
                    <i class="fas fa-tag"></i>
                  </template>
                </el-input-number>
              </el-form-item>
            </div>

            <el-form-item label="初始状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio-button
                  v-for="item in statusOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  <i class="fas" :class="{
                    'fa-bed-empty': item.value === 0,
                    'fa-user-injured': item.value === 1,
                    'fa-tools': item.value === 2,
                    'fa-ban': item.value === 3
                  }"></i> {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            
            <div class="form-tips">
              <div class="tips-title">
                <i class="fas fa-info-circle"></i>
                填写提示
              </div>
              <ul class="tips-list">
                <li>床位编号应为<strong>数字</strong>，且不大于6</li>
                <li>房间号必须为<strong>3位数字</strong>，不能以0开头</li>
                <li>房间号首位数必须与<strong>楼层一致</strong>（如3楼房间号为3XX）</li>
                <li>价格不能为<strong>负数</strong></li>
              </ul>
            </div>
            
            <div class="form-actions">
              <el-button class="form-button submit" @click="submitForm" >
                <i class="fas fa-check"></i> 提交信息
              </el-button>
              <el-button class="form-button cancel" @click="goBack">
                <i class="fas fa-times"></i> 取消返回
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.app {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  min-height: 100vh;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.bed-add-container {
  margin-left: 500px;
  width: 100%;
  max-width: 900px;
}

.header-container {
  margin-bottom: 30px;
  position: relative;
}

.header-background {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #64b5ff 0%, #409EFF 100%);
  border-radius: 50%;
  opacity: 0.1;
  z-index: 0;
}

.page-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 150, 0.08);
}

.page-header-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #64b5ff 0%, #409EFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
}

.header-content {
  flex: 1;
}

.header-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #7f8c8d;
}

.form-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.form-header {
  background: linear-gradient(90deg, #409EFF, #64b5ff);
  padding: 25px 30px;
  color: white;
  display: flex;
  align-items: center;
  gap: 15px;
}

.form-header i {
  font-size: 28px;
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-header h2 {
  font-size: 24px;
  font-weight: 600;
}

.form-content {
  padding: 40px;
}

.el-form-item {
  margin-bottom: 28px;
}

.el-form-item__label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
  padding-bottom: 8px;
  display: block;
}

.el-input {
  width: 100%;
}

.el-input__wrapper {
  border-radius: 12px;
  padding: 0 20px;
  height: 50px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
  transition: all 0.3s ease;
}

.el-input__wrapper:hover {
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
}

.el-input__prefix {
  left: 12px;
}

.el-input__prefix i {
  color: #409EFF;
  font-size: 18px;
}

.el-input__inner {
  padding-left: 35px;
  font-size: 16px;
  color: #2c3e50;
}

.el-radio-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.el-radio-button {
  flex: 1;
  min-width: 120px;
}

.el-radio-button :deep(.el-radio-button__inner) {
  width: 100%;
  border-radius: 12px;
  padding: 15px 20px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.el-radio-button :deep(.el-radio-button__inner:hover) {
  transform: translateY(-3px);
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
}

.form-button {
  height: 50px;
  width: 180px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-button.submit {
  background: linear-gradient(90deg, #409EFF, #64b5ff);
  color: white;
  border: none;
}

.form-button.submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
  background: linear-gradient(90deg, #64b5ff, #409EFF);
}

.form-button.cancel {
  background: white;
  color: #409EFF;
  border: 2px solid #409EFF;
}

.form-button.cancel:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.2);
  background: #f0f7ff;
}

.form-tips {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  margin-top: 30px;
  border-left: 4px solid #409EFF;
}

.tips-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tips-title i {
  color: #409EFF;
}

.tips-list {
  padding-left: 20px;
}

.tips-list li {
  margin-bottom: 10px;
  color: #5a6c7d;
  line-height: 1.6;
}

.tips-list li strong {
  color: #e74c3c;
}

@media (max-width: 768px) {
  .form-content {
    padding: 20px;
  }
  
  .form-header {
    padding: 20px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .form-button {
    width: 100%;
    max-width: 300px;
  }
  
  .el-radio-button {
    min-width: 100%;
  }
  
  .page-header {
    flex-direction: column;
    text-align: center;
  }
  
  .page-header-icon {
    margin-bottom: 15px;
  }
}
</style>